<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="../js/topfoot.js"></script>
    <link rel="stylesheet" href="../css/news.css">
    <link rel="stylesheet" href="../css/paging.css">
    <link rel="stylesheet" href="../css/titlebanner.css">
    <script src="../js/paging.js"></script>
</head>
<body>
<script>
    let typeData = myAjax("newsSection", "", "get");
    $(function () {
        setTabData();
        getPageData();
        setTab();
    });

    function setTabData() {
        let htmlTab = '';
        for (let i = 0; i < typeData.length; i++) {
            htmlTab += '<div id="' + typeData[i].id + '">' + typeData[i].name + '</div>';
        }
        $("#newsTab").html(htmlTab);
    }

    function getPageData() {
        let typeId = $("#newsSectionId").val();
        let json = {page: $("#page").val(), pageSize: $("#pageSize").val(), typeId: typeId};
        let data = myAjax("frontNews", json, "get");
        console.log(data);
        let newsHtml = '';
        let num = data[0].num;
        $("#countSize").html(num);
        data = data[0].list;
        for (let j = 0; j < typeData.length; j++) {
            let html = '';
            html += '<div class="pro-box" id="product-' + j + '">';
            if (data != null) {
                for (let i = 0; i < data.length; i++) {
                    html += '<div class="news-detail">\n' +
                        '                 <div class="news-title"><a href="javascript:getNewsDetailId(' + data[i].id + ')">' +
                        '                  ' + data[i].title + '' +
                        '                 </a></div>\n' +
                        '                <div class="news-content">' + data[i].createtime + '</div>\n' +
                        '            </div>';
                }
            }
            html += '</div>';
            $("#products" + j).html(html);
            newsHtml += html;
        }
        $("#news-content").html(newsHtml);
        $("#news-content").find(".pro-box").hide().eq($("#showId").val()).show(); //返回上一层，在下面查找css名为box隐藏，然后选中的显示
    }

    function getNewsDetailId(id) {
        sessionStorage.setItem("newsDetailId", id);
        myAjax("updateNum", {id: id}, "get");
        window.open("/html/news-detail.html");
    }

    function setTab() {
        $("#news-content").find(".pro-box:first").show();   //为每个BOX的第一个元素显示
        $("#newsTab div").on("mouseover", function () { //给div标签添加事件
            let index = $(this).index();  //获取当前div标签的个数
            $("#newsSectionId").val(this.id);
            $("#showId").val(index);
            getPageData();
            $(this).addClass("hovera").siblings().removeClass("hovera"); //div标签显示，同辈元素隐藏

        });
    }

</script>
<div id="tophtml"></div>
<div class="content">
    <div class="title-banner">
        <div class="newstitle floatleft">新闻动态</div>
        <div class="newstab floatright" id="newsTab">
            <div>行业动态</div>
            <div>公司新闻</div>
            <div>餐饮知识</div>
        </div>
        <input type="hidden" id="newsSectionId" value="">
        <input type="hidden" id="showId" value="">
    </div>
    <div class="newscontent1">
        <div class="news-content1-detail" id="news-content">

            <!--            <div class="news-detail">-->
            <!--                <div>日本较大抹茶餐饮企业和茶登陆上海</div>-->
            <!--                <div>2020-01-01</div>-->
            <!--            </div>-->
            <!--            <div class="news-detail">-->
            <!--                <div>日本较大抹茶餐饮企业和茶登陆上海</div>-->
            <!--                <div>2020-01-01</div>-->
            <!--            </div>-->
            <!--            <div class="news-detail">-->
            <!--                <div>日本较大抹茶餐饮企业和茶登陆上海</div>-->
            <!--                <div>2020-01-01</div>-->
            <!--            </div>-->
            <!--            <div class="news-detail">-->
            <!--                <div>日本较大抹茶餐饮企业和茶登陆上海</div>-->
            <!--                <div>2020-01-01</div>-->
            <!--            </div>-->
            <!--            <div class="news-detail">-->
            <!--                <div>日本较大抹茶餐饮企业和茶登陆上海</div>-->
            <!--                <div>2020-01-01</div>-->
            <!--            </div>-->
            <!--            <div class="news-detail">-->
            <!--                <div>日本较大抹茶餐饮企业和茶登陆上海</div>-->
            <!--                <div>2020-01-01</div>-->
            <!--            </div>-->
            <!--            <div class="news-detail">-->
            <!--                <div>日本较大抹茶餐饮企业和茶登陆上海</div>-->
            <!--                <div>2020-01-01</div>-->
            <!--            </div>-->
            <!--            <div class="page-format">-->
            <!--                <div>-->
            <!--                    <div>1</div>-->
            <!--                    <div>2</div>-->
            <!--                    <div>下一页</div>-->
            <!--                    <div>尾页</div>-->
            <!--                </div>-->
            <!--            </div>-->
        </div>
    </div>
    <div class="back-page" style="position: static">
        <div onclick="firstPage()">首页</div>
        <div onclick="lastPage()">上一页</div>
        <div onclick="nextPage()">下一页</div>
        <div onclick="endPage()">尾页</div>
        <div>
            <span>共</span><span id="countSize">10</span><span>条</span>
            <span>每页显示</span><input type="text" style="width: 20px" id="pageSize" value="8"><span>条</span>
            <span>跳转</span><input type="text" style="width: 20px" id="page" value="1"><span>页</span>
            <input type="button" value="跳转" onclick="turnPage()">
        </div>

    </div>
</div>

<div id="foothtml"></div>
</body>
</html>